<style>
.newPage .el-pager li {
    width:32px;
    height: 32px;
    box-sizing:border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius:4px;
    border:1px solid rgba(225,231,235,1);
    margin:0 4px;
    font-size:14px;
    font-weight: 400;
    color:#7485B1;
}

.el-pagination.newPage .btn-prev, .el-pagination.newPage .btn-next {
    border:1px solid rgba(225,231,235,1);
    border-radius:4px;
    width:32px;
    height: 32px;
    box-sizing:border-box;
    padding:0;
    color:#7485B1;
}

.newPage .el-pager li.active + li {
    border: 1px solid rgba(225,231,235,1);
}

.newPage .el-pager li.active {
    background-color:rgba(53,119,251,1);
    color:#fff;
}

.el-pagination.newPage {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.newPage .el-pager {
    display: flex;
}

.el-pagination.newPage .el-select .el-input {
    min-width:100px;
    height: 32px;
    box-sizing:border-box;
    display: flex;
}

.el-pagination.newPage .el-input--suffix .el-input__inner,.el-input--suffix .el-input__inner .el-input__inner {
    height:32px;
    min-width:100px;
    box-sizing:border-box;
    color:#7485B1;
}

.el-pagination.newPage .el-select .el-input .el-select__caret {
    color: #c0c4cc;
    font-size: 14px;
    transition: transform .3s;
    transform: rotate(180deg);
    cursor: pointer;
}

.el-pagination.newPage .el-input__suffix {
    position: relative;
    margin-left:-30px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right:8px;
}

.el-pagination.newPage .el-pagination__jump {
    margin-left:0;
    color:#7485B1;
}


.el-pagination.newPage .el-pagination__jump input,.el-pagination.newPage .el-select .el-input .el-select__caret {
    color:#7485B1;
}

.el-pagination.newPage .el-pagination__sizes {
    min-width:100px;
    height: 32px;
    box-sizing:border-box;
    display: flex;
    color:#7485B1;
}

</style>
<template>
    <el-pagination v-show="total >= pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout=" prev, pager, next, sizes, jumper"
        class="newPage"
        :total="total">
    </el-pagination>
</template>
<script>
  export default {
     props:{
        page: {
            required:true,
            default:1
        },

        pageSizes: {
            type:Array,
            required:true,
            default:[5, 10, 20, 50]
        },

        pageSize: {
            required:true,
            default:10
        },

        total: {
            required:true,
            default:30
        },
    },

    data() {
        return {

        }
    },

    watch:{
        total(value){
            this.total = value
        }
    },

    methods:{
        // 修改一页显示条数
        handleSizeChange(val) {
            this.$emit('changePageSize', val)
        },

        // 修改当前页码
        handleCurrentChange(val) {
            this.$emit('changePage', val)
        }
    }
  }
</script>
